<template>
  <!-- <div class="container">
    <div class="list">
      <div style="padding: 0 10px">
        <div class="height"></div>

        <div class="box_title">单位基本信息</div>
        <div class="height"></div>

        <div class="van-hairline--bottom"></div>

        <div class="item van-hairline--bottom">
          <span class="iconfont icon-gongsi"></span>
          <div class="title">{{ data.workStationName }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-anquan"></span>
          <div class="title">{{ data.unitName }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-dingweixiao"></span>
          <div class="title">{{ data.address }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-tongyishehuixinyongdaima"></span>
          <div class="title">{{ data.identify }}</div>
        </div>

        <div class="item van-hairline--bottom">
          <van-tag
            plain
            type="primary"
            size="large"
            style="margin-right: 10px"
            >{{ data.districtStreet }}</van-tag
          >
        </div>
        <div class="height"></div>
      </div>

      <div class="height" style="background: #f3f3f3"></div>
      <div class="height"></div>
      <div style="padding: 0 10px">
        <div class="box_title">综合评分</div>
      </div>
      <div class="height"></div>

      <div class="van-hairline--bottom"></div>
      <div class="height"></div>

      <div style="padding: 0 10px">
        <div id="main" style="width: 375px; height:260px"></div>
      </div>
      <div class="height"></div>

      <div style="text-align:center;font-size:18px;color:#1890ff;font-weight:700">苏州市第{{data.cityRanking}}名,{{data.districtName}}第{{data.districtRanking}}名</div>
      <div class="height"></div>

      <div class="list">
        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 联席会议:</span>
            {{ data.jointConferenceScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 组织培训:</span>
            {{ data.trainingScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 检查台账:</span>
            {{ data.checkRecordScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 定期互查:</span>
            {{ data.checkResultScore }}
          </div>
        </div>
  <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 宣传公示:</span>
            {{ data.publicityScore }}
          </div>
        </div>
        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 食品安全快检:</span>
            {{ data.quickCheckScore }}
          </div>
        </div>

   <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 经营单位:</span>
            {{ data.supIndexScore }}
          </div>
        </div>





      </div>
      <div class="height"></div>
      <div class="height" style="background: #f3f3f3"></div>
      <div class="height"></div>
      <div style="padding: 0 10px">
        <div class="box_title">经营单位</div>
      </div>
      <div class="height"></div>
      <div class="van-hairline--bottom"></div>
      <div style="padding: 0 10px">
        <div
          class="list van-hairline--bottom"
          v-for="(item, index) in data.workStationSuperViseUnitList"
          :key="index"
        >
          <div class="height"></div>
          <van-row type="flex" justify="space-between">
            <van-col span="18" class="fontSize">
             店招名: {{ item.storeName }}
            </van-col>
            <van-col span="6" style="text-align: right">





              <van-tag
                plain
                size="medium"
                type="success"
                v-if="item.indexScore>79"
                >食安指数 {{ item.indexScore }}</van-tag
              >

               <van-tag plain type="warning" size="medium" v-else-if="item.indexScore>59">食安指数 {{
                item.indexScore
              }}</van-tag>
              <van-tag plain type="danger" size="medium" v-else>食安指数 {{
                item.indexScore
              }}</van-tag>
            </van-col>
          </van-row>
          <div class="height"></div>
          <van-row>
            <van-col span="24" class="fontSize"> 许可证号:{{ item.newLicenseNo }} </van-col>
          </van-row>
          <div class="height"></div>

          <van-row>
            <van-col span="24" class="fontSize">
              信用代码:{{ item.supIdentify }}
            </van-col>
          </van-row>
          <div class="height"></div>
           <van-row>
            <van-col span="24" class="fontSize">
              执照名称:{{ item.supUnitName }}
            </van-col>
          </van-row>
          <div class="height"></div>
        </div>
      </div>
    </div>
  </div> -->
    <div style="height: 100%">
    <div class="loading" v-if="loading">
      <div class="radar-spinner">
        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>
      </div>
    </div>
  <div class="container" v-else>
    <header class="header_title">工作站单位信息公示</header>
    <header class="header">
      <div class="title">{{ data.workStationName }}</div>
      <div class="height-10"></div>
      <div style="font-size:14px">{{ data.address }}</div>
      <div class="height-10"></div>
      <van-tag type="warning" size="mini" style="margin-right: 10px">{{
        data.districtStreet
      }}</van-tag>
      <van-tag type="danger" size="mini" v-if="data.bodyIndustryRemarks">{{
        data.bodyIndustryRemarks
      }}</van-tag>

        <!-- <template v-if="data.keyUnIt">
         <van-tag type="warning" size="medium" style="margin-right: 10px"
          >重点单位</van-tag
        >
          <van-tag type="warning" size="medium" style="margin-right: 10px"
          >{{ data.typeA}}</van-tag
        >
    </template>


        
        <van-tag type="warning" size="medium" v-if="data.label"
          >总监单位</van-tag
        > -->
      <div class="height-10"></div>
      <div class="height-10"></div>
      <div style="text-align: center; font-size: 18px; font-weight: 700">
                   {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}综合得分<span
          v-if="data.indexScore > 79"
          style="color: #a2db57"  
          >{{ data.indexScore }}</span
        >
        <span v-else-if="data.indexScore > 59" style="color: #ffd700">{{
          data.indexScore
        }}</span>
        <span v-else style="color: #ff0000">{{ data.indexScore }}</span
        >分
      </div>
      <div id="main" style="width: 375px; height: 260px"></div>
      <!-- 
      <div class="list">
        <div class="title">食安指数分析</div>
        <div class="height-10"></div>
        <div class="height-10"></div>
        <div>联席会议:{{ data.jointConferenceScore }}</div>
        <div class="height-10"></div>
        <div>组织培训:{{ data.trainingScore }}</div>
        <div class="height-10"></div>
        <div>检查台账:{{ data.checkRecordScore }}</div>
        <div class="height-10"></div>
        <div>定期互查:{{ data.checkResultScore }}</div>
        <div class="height-10"></div>
        <div>宣传公示:{{ data.publicityScore }}</div>
 <div class="height-10"></div>
        <div>食品安全快检:{{ data.quickCheckScore }}</div>

 <div class="height-10"></div>
        <div>经营单位:{{ data.supIndexScore }}</div>


      



























      </div> -->
      <div class="list">
        <div class="title">综合得分分析</div>
        <div class="height-10"></div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">联席会议</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            完成情况:{{ data.jointConferenceScore }}
          </div>
          <div class="height-10"></div>
        </div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">组织培训</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期: {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.trainingScore }}</div>
          <div class="height-10"></div>
        </div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">检查台账</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.checkRecordScore }}</div>
          <div class="height-10"></div>
        </div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">定期互查</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.checkResultScore }}</div>
          <div class="height-10"></div>
        </div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">宣传公示</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.publicityScore }}</div>
          <div class="height-10"></div>
        </div>

        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">食品安全快检</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.quickCheckScore }}</div>
          <div class="height-10"></div>
        </div>
        <div class="item">
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">经营单位</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">完成情况:{{ data.supIndexScore }}</div>
          <div class="height-10"></div>
        </div>
      </div>
    </header>
    <section class="section">
      <div
        class="title"
        style="padding-left: 5px; border-left: 5px solid #1890ff;font-size: 18px;"
      >
        经营单位 <span v-if="this.$route.query.id=='1416369373123182592'" style="color: #ec850e;font-size:10px">(消费指数=综合食安指数+人气指数)</span>
      </div>
      <!-- <div
        class="title"
        style="background: #fff; padding: 10px; border-radius: 10px"
      >
        经营单位
      </div> -->
      <div class="height-10"></div>

      <div class="list">
        <div
          class="item"
          v-for="(item, index) in data.workStationSuperViseUnitList"
          :key="index"
          @click="()=>{$router.push(`/publicity?id=${item.fSuperviseUnitId}&consumptionIndex=${item.popularityIndex}`)}"
        >
          <div class="left">
            <div class="fontSize">{{ item.storeName.length>5?item.storeName.substring(0,5)+'...':item.storeName }}</div>
            <div style="color: #808080">{{ item.grouping || "--" }}</div>
          </div>
          <div class="right">
            <span style="font-size:12px;color:#808080">
                {{data.likeWhiteList?'消费指数':'食安指数'}}
              </span>

               <!-- <span style="color: #ffd700">{{item.consumptionIndex}}</span> -->
               <template v-if="data.likeWhiteList">
                 <span v-if="item.consumptionIndex >= 80" style="color: #a2db57">
              {{item.consumptionIndex}}
            </span>
            <span v-else-if="item.consumptionIndex >= 60" style="color: #ffd700">{{item.consumptionIndex}}</span>
            <span v-else style="color: #ff0000">{{item.consumptionIndex}}</span>
               </template>
              <span v-else-if="item.indexScore > 79" style="color: #a2db57">
              {{item.indexScore}}
            </span>
            <span v-else-if="item.indexScore > 59" style="color: #ffd700">{{item.indexScore}}</span>
            <span v-else style="color: #ff0000">{{item.indexScore}}</span>
          </div>


<!-- @ApiModelProperty(value="消费指数=食安指数*70% + 人气指数*30%")
    private String  consumptionIndex;

    @ApiModelProperty(value="人气指数=60+(40/m)*n。\n" +
            "    人气指数按百分制计，60 分为基础分，m 为本工作站内 经营单位总数， n =m-点赞排名(点赞排名第一为 1，点赞\n" +
            "\n" +
            "            排名第二为 2，依次类推)。")
    private String  popularityIndex; -->


        </div>

     




      </div>
          <div style="text-align:center" v-if="data.workStationSuperViseUnitList&&data.workStationSuperViseUnitList.length==0">
    暂未纳入经营单位
      </div>
        <div class="height-10"></div>
    </section>
    <div class="height-10"></div>
    <footer class="footer">苏州市市场监督管理局监</footer>
  </div>
  </div>
</template>
<script>
import { timestamp } from "@/utils/token";
import axios from "axios";
import { ImagePreview } from "vant";
import * as echarts from "echarts";

export default {
  data() {
    return {
      data: {},
      loading: true,
    };
  },
  created() {
    // https://spaq.suzhou.gov.cn/test-ssa-api/sys/login/quaryCompanyMainPageInfo
    //  axios
    //   .get(
    //     "https://spaq.suzhou.gov.cn/test-ssa-api/unit/food/safety/update/findByNewLicenseNo",
    //     {
    //       params: {
    //         newLicenseNo: this.$route.query.newLicenseNo,
    //       },
    //       headers: {
    //         timestamp: timestamp(),
    //       }
    //     }
    //   )
    //   .then((res) => {
    //     if (res.data.code == 200) {
    //       this.data = res.data.data;
    //     } else {
    //       this.$toast(res.data.msg);
    //     }
    //   })
    //   .catch((err) => {
    //     console.log(12);
    //   });
  },
  computed: {},
  mounted() {
    this.quaryCompanyMainPageInfo();
  },
  methods: {
    quaryCompanyMainPageInfo() {
      axios
        .get(
          "https://spaq.suzhou.gov.cn/ssa-api/ssa/claim/map/workStationCode",
          {
            params: {
              id: this.$route.query.id,
            },
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data;
              this.loading = false;
           setTimeout(() => {
              this.radar();
            });
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    radar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      // let color = "";
      // if (this.data.indexScore > 79) {
      //   color = "#008000";
      // } else if (this.data.indexScore > 59) {
      //   color = "#ffd700";
      // } else {
      //   color = "#ff0000";
      // }
      myChart.setOption({
        // title: {
        //   text: `本单位综合得分${this.data.indexScore}分`,
        //   left: "center",
        //   textStyle: {
        //     color,
        //   },
        //   // textAlign:"right"
        // },
        radar: {
          radius: "50%",
          center: ["50%", "50%"],
          splitNumber: 6, // 雷达图圈数设置
          // shape: 'circle',
          indicator: [
            {
              name: "检查台账"+`\n${this.data.workstationScoreResponseList[0].checkRecordScore}分`,
              max: this.data.workstationScoreResponseList[0].checkRecordTotal,
            },
            {
              name: "定期检查"+`\n${this.data.workstationScoreResponseList[0].checkResultScore}分`,
              max: this.data.workstationScoreResponseList[0].checkResultTotal,
            },
            {
              name: "联席会议"+`\n${this.data.workstationScoreResponseList[0].jointConferenceScore}分`,
              max: this.data.workstationScoreResponseList[0]
                .jointConferenceTotal,
            },
            {
              name: "食品安全快检"+`\n${this.data.workstationScoreResponseList[0].quickCheckScore}分`,
              max: this.data.workstationScoreResponseList[0].quickCheckTotal,
            },
            {
              name: "经营单位"+`\n${this.data.workstationScoreResponseList[0].safetySuperviseUnitScore}分`,
              max: this.data.workstationScoreResponseList[0]
                .safetySuperviseUnitTotal,
            },
            {
              name: "组织培训"+`\n${this.data.workstationScoreResponseList[0].trainingScore}分`,
              max: this.data.workstationScoreResponseList[0].trainingTotal,
            },
            {
              name: "宣传公示"+`\n${this.data.workstationScoreResponseList[0].publicityScore}分`,
              max: this.data.workstationScoreResponseList[0].publicityTotal,
            },
          ],
          // name: {
          //   //修改indicator文字的颜色
          //   textStyle: {
          //     color: "#000000",
          //   },
          // },
          axisName: {
            color: "#000000",
            // borderRadius: 3,
            fontSize: "14px",
            lineHeight: 20,
            // padding: [3, 5]
          },

          axisLine: {
            // 设置雷达图中间射线的颜色
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
              type: "dotted",
            },
          },
          splitLine: {
            //网格颜色设置
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
            },
          },
          splitArea: {
            //设置图表颜色，show的值为true
            show: true,
            areaStyle: {
              // color:"#c1ddf8", //一般设置方式
              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  { offset: 0, color: "#ffffff" }, // 0% 处的颜色
                  { offset: 1, color: "#1890ff" }, // 100% 处的颜色
                ],
                false
              ),
            },
          },
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [
                  this.data.workstationScoreResponseList[0].checkRecordScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0]
                        .checkRecordScore,
                  this.data.workstationScoreResponseList[0].checkResultScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0]
                        .checkResultScore,
                  this.data.workstationScoreResponseList[0]
                    .jointConferenceScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0]
                        .jointConferenceScore,
                  this.data.workstationScoreResponseList[0].quickCheckScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0].quickCheckScore,
                  this.data.workstationScoreResponseList[0]
                    .safetySuperviseUnitScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0]
                        .safetySuperviseUnitScore,
                  this.data.workstationScoreResponseList[0].trainingScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0].trainingScore,
                  this.data.workstationScoreResponseList[0].publicityScore < 0
                    ? 0
                    : this.data.workstationScoreResponseList[0].publicityScore,
                ],
                lineStyle: {
                  width: 1,
                },
                symbol: "none",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(255, 145, 124, 0.1)",
                      offset: 0,
                    },
                    {
                      color: "rgba(246,218,255, 0.9)",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      });
    },
    Preview(e) {
      ImagePreview([e]);
    },
  },
};
</script>
<style lang="scss" scoped>
// .container {
//   // padding: 10px;
//   .list {
//     .item {
//       display: flex;
//       align-items: center;
//       padding: 5px 0;
//       .title {
//         padding-left: 10px;
//         font-size: 16px;
//       }
//       .iconfont {
//         color: #1890ff;
//         font-size: 22px;
//       }
//       .color {
//         color: #1890ff;
//       }
//     }
//     .fontSize {
//       font-size: 16px;
//     }
//   }
//   .height {
//     height: 10px;
//   }
//   .box_title {
//     border-left: 5px solid #1890ff;
//     padding-left: 10px;
//     font-size: 17px;
//   }
// }

.container {
  font-size: 14px;
  padding-bottom: 20px;
  .header_title {
    background-color: #1890ff;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
  }
  .header {
    padding: 10px;
    // background-color: #1890ff;
    background: linear-gradient(to bottom, #1890ff, #ffffff);
    color: white;
    .title {
      font-size: 18px;
    }
    .list {
      padding: 10px;
      background-color: #fff;
      color: #000;
      border-radius: 10px;
      .title_son {
        font-size: 16px;
        padding-left: 10px;
      }

      .padding_lfet {
        padding-left: 20px;
      }
    }
  }
  .section {
    padding: 10px;
    background-color: #f3f3f3;
    .list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        width: 48%;
        border-radius: 10px;
        background-color: #fff;
        padding: 10px;
        display: flex;
        margin-bottom: 10px;
        .left {
          flex: 1;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .fontSize {
            font-size: 16px;
          }
        }
        .right {
          width: 55px;
          height: 45px;
          font-size: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
  .footer {
    padding: 10px;
    background-color: #1890ff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
  }
  .height-10 {
    height: 10px;
  }
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .radar-spinner,
  .radar-spinner * {
    box-sizing: border-box;
  }

  .radar-spinner {
    height: 60px;
    width: 60px;
    position: relative;
  }

  .radar-spinner .circle {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: radar-spinner-animation 2s infinite;
  }

  .radar-spinner .circle:nth-child(1) {
    padding: calc(60px * 5 * 2 * 0 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(2) {
    padding: calc(60px * 5 * 2 * 1 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(3) {
    padding: calc(60px * 5 * 2 * 2 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(4) {
    padding: calc(60px * 5 * 2 * 3 / 110);
    animation-delay: 0ms;
  }

  .radar-spinner .circle-inner,
  .radar-spinner .circle-inner-container {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: calc(60px * 5 / 110) solid transparent;
  }

  .radar-spinner .circle-inner {
    border-left-color: #1890ff;
    border-right-color: #1890ff;
  }

  @keyframes radar-spinner-animation {
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>
